<html>

<head>
    <style>

        .resize-drag {

            background-color: #29e;
            color: white;
            font-size: 12px;
            font-family: sans-serif;
            border-radius: 8px;
            padding: 0;
            margin: 0 0;
            white-space: pre;

            width: 120px;

            /* This makes things *much* easier */
            box-sizing: border-box;
            position: absolute;
        }

        .resize-container {
            position: absolute;
            top: 300px;
            display: inline-block;
            width: 800px;
            height: 500px;
            background: lightgrey;
        }


    </style>

    <script src="chrome-bundle.js"></script>

</head>

<body>

<div class="resize-container">


    <div class="resize-drag pagemark" id="pagemark0" style="left: 150px; top: 150px; width: 200px; height: 200px;">
        <!--Resize from any edge or corner-->
    </div>

    <div class="resize-drag pagemark" id="pagemark1" style="left: 400px; top: 150px; width: 100px; height: 100px;">
        <!--Resize from any edge or corner-->
    </div>

</div>


</body>
</html>
